<template>
	<div>

		<el-row>
			<el-col :span="1">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="4">
				<el-input size="small" v-model="queryData.licensePlateNamber" placeholder="请输入车牌号"></el-input>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">送修人:</p>
			</el-col>
			<el-col :span="4">
				<el-input size="small" v-model="queryData.maintainer" placeholder="请输入送修人姓名"></el-input>
			</el-col>

			<el-col :span="1">
				<p class="queryLabel">创建日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker type="date" size="small" v-model="queryData.dateStart" placeholder="起始日期"></el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker type="date" size="small" v-model="queryData.dateStop" placeholder="结束日期"></el-date-picker>
			</el-col>
			<el-col :span="2" style="float: right;">
				<el-button size="small" @click="query" type="primary">查 询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="1">
				<p class="queryLabel">维修日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker type="date" size="small" v-model="queryData.maintainDate" placeholder="请输入维修日期"></el-date-picker>
			</el-col>

			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="area" size="small" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" >
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="brand" size="small" placeholder="请选择品牌" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" >
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="queryData.companyId" size="small" placeholder="请选择公司" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>

		</el-row>

		<el-row>
			<el-table :data="tableData.dataList" stripe border>
				<el-table-column prop="vin" label="vin" width="170">
				</el-table-column>
				<el-table-column prop="plate_num" label="车牌号" width="170">
				</el-table-column>
				<el-table-column prop="owner_name" label="车主姓名" width="170">
				</el-table-column>
				<el-table-column prop="owner_phone" label="车主电话" width="170">
				</el-table-column>
				<el-table-column prop="owner_birthday" label="车主出生日期" width="170">
				</el-table-column>
				<el-table-column prop="contact_name" label="联系人" width="170">
				</el-table-column>
				<el-table-column prop="manitain_sender" label="送修人" width="170">
				</el-table-column>
				<el-table-column prop="contact_phone" label="联系人电话" width="170">
				</el-table-column>
				<el-table-column prop="buy_date" label="购买日期" width="170" :formatter="byDates">
				</el-table-column>

			</el-table>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				area:"", // 区域
				brand:"", // 品牌
				brandCombo: [],
				areaCombo: [],
				companyCombo: [],
				//当前页
				tabName: "first",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,

				//查询集合
				queryData: {
					//车牌号
					licensePlateNamber: "",
					//维修时间
					maintainDate: "",
					//送修人
					maintainer: "",
					//创建起始日期
					dateStart: "",
					//创建结束日期
					dateStop: "",
					//公司ID
					companyId:"",
				},
				//表格数据
				tableData: {
					dataList: [],
					total: 0
				},

				//表格数据
				tableWorkOrderData: {
					dataList: [],
					total: 0
				},
			}
		},

		methods: {

			/*查询按钮点击*/
			query: function() {
				/*if(this.$data.queryData.companyId == "") {
					this.$message.error("请选择公司!");
				} else {*/
					//时间转换
					this.$data.queryData.dateStart = this.transformDates(this.$data.queryData.dateStart);
					this.$data.queryData.dateStop = this.transformDates(this.$data.queryData.dateStop);
					this.$data.queryData.maintainDate = this.transformDates(this.$data.queryData.maintainDate);
					this.$http.post(this.API_ROOT + "/crm/car/carAndOwner", this.$data.queryData, {
						params: {
							start: this.$data.CurentPage,
							limit: this.$data.page.pageSize,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = parseInt(resp.data.total);
						}
					});
				
				//}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					debugger;
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.queryData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				debugger;
				//this.$data.dictGroup = '';
				this.query();
			},
			//开单日期转换
			byDates: function(row, column) {
				if(row.buy_date == "" || row.buy_date == null) return "";
				return moment(row.buy_date).format("YYYY-MM-DD");
			},

			//日期转换
			transformDates: function(date) {
				if(date == "" || date == null) return "";
				return moment(date).format("YYYY-MM-DD");
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			this.query();
		}
	}
</script>

<style>

</style>